/**
 * 字符串省略组件
 * @author SPY
 * @description 用于处理一行文字过多或标题过长问题
 * @date 2019/11/23
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'antd';

class EllipsisText extends React.Component {

    // 定义传入属性
    static propTypes = {
        text: PropTypes.string.isRequired,  // 要处理的文本
        length: PropTypes.number.isRequired, // 要保留的字符串长度
        tail: PropTypes.string,   // 尾部省略符号,默认为:'...'
    }

    // 定义传入属性的默认值
    static defaultProps = {
        tail: '...',
    }

    render() {
        const { text, length, tail, ...restProps } = this.props;
        //不符合常理,只显示文本
        if (text.length <= length || length < 0) {
            return <span {...restProps}>{text}</span>
        }
        return (
            <Tooltip title={text} placement="topRight">
                <span {...restProps}>
                {
                    length - tail.length > 0 ? text.slice(0, (length - tail.length)) : null
                }
                <span>
                    {tail}
                </span>
            </span>
            </Tooltip>
        );
    }
}

export default EllipsisText;